<template>
    <div class="common_page">
        <div class="main_content" ref="mainContent">
            <div class="main_content_top">
                <div class="main_content_top_left">
                    <div class="top_left_header">
                        <div class="top_left_title">简报</div>
                        <div class="change_date" :style="cssVars">
                            <el-button :class="{ date_active: briefNote === 0 }" plain
                                @click="briefNoteChange('day', 0)">日</el-button>
                            <el-button :class="{ date_active: briefNote === 1 }" plain
                                @click="briefNoteChange('week', 1)">周</el-button>
                            <el-button :class="{ date_active: briefNote === 2 }" plain
                                @click="briefNoteChange('month', 2)">月</el-button>
                        </div>
                    </div>
                    <div class="top_left_bottom">
                        <div class="top_left_value" v-for="(item, index) in briefNoteList" :key="index">
                            <div class="top_left_value_name">{{ item.name }}</div>
                            <div class="top_left_value_unit">
                                <div class="top_left_value_num">{{ item.num }}</div>
                                {{ item.unit }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main_content_top_center">
                    <div class="top_left_header">
                        <div class="top_left_title">工种人数</div>
                    </div>
                    <div class="common_data">
                        <div ref="workers_number" style="width: 60%; height: 158px" />
                        <div class="common_data_right">
                            <div class="common_data_single" v-for="(item, index) in pieEquipentY" :key="index">
                                <div>{{ item.value }}人</div>
                                <div>{{ ((item.value / 109) * 100).toFixed(2) }}%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main_content_top_right">
                    <div class="top_left_header">
                        <div class="top_left_title">工位出勤统计</div>
                        <div class="change_date" :style="cssVars">
                            <el-button :class="{ date_active: beOnDuty === 0 }" plain
                                @click="beOnDutyChange('day', 0)">日</el-button>
                            <el-button :class="{ date_active: beOnDuty === 1 }" plain
                                @click="beOnDutyChange('week', 1)">周</el-button>
                            <el-button :class="{ date_active: beOnDuty === 2 }" plain
                                @click="beOnDutyChange('month', 2)">月</el-button>
                        </div>
                    </div>
                    <div class="common_data">
                        <div ref="station_attendance_statistics" style="width: 60%; height: 158px" />
                        <div class="common_data_right">
                            <div class="common_data_single" v-for="(item, index) in pieEquipentY" :key="index">
                                <div>{{ item.value }}人</div>
                                <div>{{ ((item.value / 109) * 100).toFixed(2) }}%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <el-card class="main-card" shadow="never">
                <el-form :model="searchData" ref="queryForm" :inline="true" label-width="68px"
                    style="margin-bottom: -20px">
                    <el-form-item label="员工编号" prop="number">
                        <el-input placeholder="请输入内容" v-model="searchData.number"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名名称" prop="name">
                        <el-input placeholder="请输入内容" v-model="searchData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="岗位" prop="job">
                        <el-input placeholder="请输入内容" v-model="searchData.job"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="phoneNumber">
                        <el-input placeholder="请输入内容" v-model="searchData.phoneNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="templateNumber">
                        <el-button v-hasPermi="['productManage:personnelStatistics:query']" type="primary"
                            icon="el-icon-search" size="mini" @click="search">{{ $t('search') }}</el-button>
                    </el-form-item>
                </el-form>
                <div class="card-toolbar mb8" style="margin-top: 20px">
                    <div></div>
                    <div>
                        <el-tooltip class="item" effect="dark" content="重置" placement="top">
                            <el-button size="mini" circle icon="el-icon-refresh"
                                v-hasPermi="['productManage:personnelStatistics:query']" @click="resetFields" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="导出" placement="top">
                            <el-button size="mini" circle icon="el-icon-download"
                                v-hasPermi="['productManage:personnelStatistics:export']" @click="handleExport" />
                        </el-tooltip>
                    </div>
                </div>

                <div class="page_content" style="width: 100%">
                    <div class="page_content_bottom">
                        <sysTable :data="setTableData" :columns="setTableColumns" :curr-page="searchData.currPage"
                            :total-page="pageTotal" :page-size="searchData.pageSize" @sizeChange="sizeChange"
                            @currentChange="currentChange">
                            <template #sex="scope">
                                <div>{{ scope.scope.row.sex == '1' ? '女' : '男' }}</div>
                            </template>
                            <template #operation="scope">
                                <el-button v-hasPermi="['productManage:personnelStatistics:detail']" size="small"
                                    type="primary" plain style="padding: 5px" icon="el-icon-edit"
                                    @click="showDetail(scope.scope.row)">
                                    详情
                                </el-button>
                            </template>
                        </sysTable>
                    </div>
                </div>
            </el-card>
            <el-dialog :title="addOrEditTitle" :visible.sync="addOrEditDialog" width="748px" append-to-body>
                <el-form ref="form" :model="formData" label-width="80px">
                    <!-- <div style="opacity: 0;">1</div> -->

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="工位编号" prop="purchaseNumber">
                                <el-input v-model="formData.purchaseNumber" type="number" placeholder="请输入采购数量"
                                    style="width: 265px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="位置" prop="unit">
                                <el-input v-model="formData.unit" placeholder="请输入单位" style="width: 265px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="关联订单" prop="countPrice">
                                <el-input v-model="formData.countPrice" type="number" placeholder="请输入总价"
                                    style="width: 265px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="关联批次" prop="price">
                                <el-input v-model="formData.price" type="number" placeholder="请输入单价"
                                    style="width: 265px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="关联分段" prop="purchaseDate">
                                <el-input v-model="formData.price" type="number" placeholder="请输入单价"
                                    style="width: 265px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="操作人" prop="supplierName">
                                <el-input v-model="formData.supplierName" placeholder="请输入供应商" style="width: 265px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开始时间" prop="price">
                                <el-date-picker v-model="formData.dates" type="date" placeholder="选择日期"
                                    style="width: 265px"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束时间" prop="purchaseDate">
                                <el-date-picker v-model="formData.dates" type="date" placeholder="选择日期"
                                    style="width: 265px"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用时" prop="supplierName">
                                <el-input v-model="formData.price" type="number" placeholder="请输入单价"
                                    style="width: 265px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用时" prop="supplierName">
                                <el-radio-group v-model="formData.radio">
                                    <el-radio :label="3">使用中</el-radio>
                                    <el-radio :label="6">已结束</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">提 交</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import * as echarts from 'echarts';
import { getPersonStatisticsList, attendanceStatistics, workersNumber } from '../api/product/index';
import sysTable from '../components/SysTable';
export default {
    name: 'equipmentEnergy',
    components: {
        sysTable,
    },
    data() {
        return {
            searchData: {
                number: '',
                name: '',
                job: '',
                phoneNumber: '',
                pageSize: 10,
                currPage: 1,
            },
            setTableData: [],
            pageTotal: 0,
            buildList: [],
            workShopList: [],
            deviceList: [],
            classifyList: [],
            setTableColumns: [
                {
                    label: '员工编号',
                    prop: 'number',
                    minWidth: '180',
                    align: 'center',
                    fixed: 'left',
                    showOverflowTooltip: true,
                },
                {
                    label: '员工姓名',
                    prop: 'name',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '性别',
                    prop: 'sex',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '岗位',
                    prop: 'job',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '联系方式',
                    prop: 'phoneNumber',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '生产情况',
                    prop: 'productSate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '工单达成率',
                    prop: 'rate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '本日完成单数',
                    prop: 'theDayFinish',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '本周完成单数',
                    prop: 'theWeekFinish',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                // {
                //   label: '有功电量(kW·h)',
                //   prop: 'activePower',
                //   width: '180',
                //   align: 'center',
                //   showOverflowTooltip: true
                // },
                // {
                //   label: '无功电量(Kvar)',
                //   prop: 'reactivePower',
                //   width: '180',
                //   align: 'center',
                //   showOverflowTooltip: true
                // },
                {
                    label: '本月完成单数',
                    prop: 'theMonthFinish',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '操作',
                    prop: 'operation',
                    minWidth: '120',
                    fixed: 'right',
                    align: 'center',
                },
            ],
            pieEquipentL: ['数控人员', '操作人员', '保养人员', '维修人员'],
            pieEquipentY: [
                {
                    value: 12,
                    name: '数控人员',
                },
                {
                    value: 22,
                    name: '操作人员',
                },
                {
                    value: 31,
                    name: '保养人员',
                },
                {
                    value: 44,
                    name: '维修人员',
                },
            ],
            ringEquipentL: [],
            ringEquipentY: [],
            chartsLoading: false,
            choiceDate0: '',
            buttonLoading: false,
            formData: {
                radio: 3,
            },
            briefNote: 0,
            beOnDuty: 0,
            briefNoteList: [
                {
                    name: '工位出勤率',
                    unit: '%',
                    num: '0',
                    id: 1,
                },
                {
                    name: '到岗人次',
                    unit: '人',
                    num: '0',
                    id: 2,
                },
                {
                    name: '开机数量',
                    unit: '台',
                    num: '0',
                    id: 3,
                },
                {
                    name: '已完成任务总数',
                    unit: '个',
                    num: '0',
                    id: 4,
                },
                {
                    name: '处理分段数量',
                    unit: '个',
                    num: '0',
                    id: 5,
                },
                {
                    name: '平均批次处理时长',
                    unit: 'h/个',
                    num: '0',
                    id: 6,
                },
            ],
            addOrEditTitle: '新增',
            addOrEditDialog: false,
        };
    },
    computed: {
        ...mapGetters(['theme']),
        cssVars() {
            return {
                '--color': this.theme,
            };
        },
    },
    mounted() {
        this.getPageList();
        this.attendanceStatisticsChart();
        this.attendanceStatistics();
        this.workersNumber();
    },
    methods: {
        search() {
            this.buttonLoading = true;
            this.getPageList();
        },
        resetFields() {
            this.workShopList = [];
            this.deviceList = [];
            this.searchData = {
                buildingId: '',
                workshopId: null,
                deviceId: null,
                classifyId: '',
                deviceName: '',
                type: 1,
                date: ['2022-01-01', '2022-01-31'],
                pageSize: 10,
                currPage: 1,
            };
            this.search();
        },
        sizeChange(val) {
            this.searchData.pageSize = val;
            this.getPageList();
        },
        currentChange(val) {
            this.searchData.currPage = val;
            this.getPageList();
        },
        getPageList() {
            getPersonStatisticsList(this.searchData)
                .then((res) => {
                    if (res.code == 200) {
                        this.setTableData = res.data.list;
                        this.pageTotal = res.data.total || 0;
                    } else {
                        this.setTableData = [];
                        this.pageTotal = 0;
                        this.$message.error('列表数据请求失败，请联系管理员');
                    }
                })
                .finally(() => {
                    this.buttonLoading = false;
                });
        },
        attendanceStatisticsChart() {
            const obj = {
                dateType: this.beOnDuty,
            };
            attendanceStatistics(obj).then((res) => {
                console.log(res, '777');
                this.ringEquipentL = [];
                this.ringEquipentY = [];
                res.data.list.map((item) => {
                    this.ringEquipentL.push(item.date);
                    const obj = {
                        value: item.count,
                        name: item.date,
                    };
                    this.ringEquipentY.push(obj);
                });
                this.initStationAttendanceStatistics();
            });
        },
        attendanceStatistics() {
            const obj = {
                dateType: this.briefNote,
            };
            attendanceStatistics(obj).then((res) => {
                console.log(res, '888');
                this.briefNoteList[0].num = res.data.rate;
                this.briefNoteList[1].num = res.data.arrival;
                this.briefNoteList[2].num = res.data.starting;
                this.briefNoteList[3].num = res.data.task;
                this.briefNoteList[4].num = res.data.processedBatch;
                this.briefNoteList[5].num = res.data.avgProcessedTime;
            });
        },
        workersNumber() {
            workersNumber().then((res) => {
                this.pieEquipentL = [];
                this.pieEquipentY = [];
                res.data.list.map((item) => {
                    this.pieEquipentL.push(item.date);
                    const obj = {
                        value: item.count,
                        name: item.date,
                    };
                    this.pieEquipentY.push(obj);
                });
                this.initWorkersNumber();
            });
        },
        handleExport() {
            this.buttonLoading = true;
            var datas = {
                number: this.searchData.number,
                name: this.searchData.name,
                job: this.searchData.job,
                phoneNumber: this.searchData.phoneNumber,
                pageSize: '',
                currPage: '',
            };
            const obj = JSON.parse(JSON.stringify(datas));
            this.download(
                'production/productionStaff/queryListReport',
                {
                    ...obj,
                },
                '人员统计列表.xlsx'
            );
            this.buttonLoading = false;
            // exportBuild(obj).then(res=> {
            //   const fileName = '设备能源监控记录.xlsx'
            //   saveExcel(res.data, fileName)
            // })
        },
        dateChange() {
            if (this.searchData.date && this.searchData.date.length > 0) {
                if (this.searchData.date[0] == this.searchData.date[1]) {
                    this.searchData.type = 2;
                } else {
                    this.searchData.type = 1;
                }
            } else {
                this.searchData.type = 1;
            }
        },
        showDetail(val) {
            // this.addOrEditTitle = '详情'
            // this.addOrEditDialog = true
            this.$router.push({
                path: '/shengchan/personnelStatistics/detail',
                query: {
                    userId: val.id,
                },
            });
        },
        showEdit() {
            this.addOrEditTitle = '编辑';
            this.addOrEditDialog = true;
        },
        cancel() {
            this.addOrEditDialog = false;
        },
        submitForm() {
            this.addOrEditDialog = false;
        },
        timeElectricityChange(val, num) {
            this.timeElectricity = num;
        },
        briefNoteChange(val, num) {
            this.briefNote = num;
            this.attendanceStatistics();
        },
        beOnDutyChange(val, num) {
            this.beOnDuty = num;
            this.attendanceStatisticsChart();
        },
        initWorkersNumber() {
            const myEcharts = echarts.init(this.$refs.workers_number);
            myEcharts.setOption(
                {
                    color: ['#FF7433', '#FC7878', '#C899FF', '#00D073', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
                    backgroundColor: '#fff',
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)',
                    },
                    legend: {
                        data: this.pieEquipentL,
                        orient: 'vertical',
                        right: 0,
                        top: 25,
                        bottom: 20,
                        padding: [0, 0, 5, 0],
                        itemGap: 20,
                        itemHeight: 10,
                        itemWidth: 10,
                        icon: 'rect',
                        textStyle: {
                            color: '#333',
                            fontSize: '14px',
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true,
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['50%', '75%'],
                            center: ['30%', '50%'],
                            // selectedMode: 'single',
                            data: this.pieEquipentY,
                            label: {
                                show: false,
                                color: '#606266',
                                fontSize: '12px',
                            },
                            labelLine: {
                                show: false,
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                                },
                            },
                        },
                    ],
                },
                true
            );
        },
        initStationAttendanceStatistics() {
            const myEcharts = echarts.init(this.$refs.station_attendance_statistics);
            myEcharts.setOption(
                {
                    color: ['#FF7433', '#FC7878', '#C899FF', '#00D073', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
                    backgroundColor: '#fff',
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)',
                    },
                    legend: {
                        data: this.ringEquipentL,
                        orient: 'vertical',
                        right: 0,
                        top: 25,
                        bottom: 20,
                        padding: [0, 0, 5, 0],
                        itemGap: 20,
                        itemHeight: 10,
                        itemWidth: 10,
                        icon: 'rect',
                        textStyle: {
                            color: '#333',
                            fontSize: '14px',
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true,
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['50%', '75%'],
                            center: ['30%', '50%'],
                            // selectedMode: 'single',
                            data: this.ringEquipentY,
                            label: {
                                show: false,
                                color: '#606266',
                                fontSize: '12px',
                            },
                            labelLine: {
                                show: false,
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                                },
                            },
                        },
                    ],
                },
                true
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.common_page {
    height: 100%;
    width: 100%;
    background: #f3f4f5;
    overflow: auto;
}

.main_content {
    padding: 16px 20px;
}

.main_content_top {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .main_content_top_left {
        width: 33%;
        height: 238px;
        background: #fff;
        position: relative;
        box-sizing: border-box;
        padding: 20px;
        padding-bottom: 0px;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
        border-radius: 8px 8px 8px 8px;

        .top_left_bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .top_left_value {
                width: 33%;
                margin-bottom: 20px;

                .top_left_value_name {
                    font-size: 14px;
                    color: #666;
                    line-height: 20px;
                    margin-bottom: 4px;
                }

                .top_left_value_unit {
                    display: flex;
                    align-items: flex-end;
                    color: #333;
                    font-size: 14px;

                    .top_left_value_num {
                        font-size: 24px;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    .main_content_top_center {
        width: 33%;
        height: 238px;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
        border-radius: 8px 8px 8px 8px;
    }

    .main_content_top_right {
        width: 33%;
        height: 238px;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
        border-radius: 8px 8px 8px 8px;
    }

    .top_left_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .top_left_title {
            color: #000;
            font-size: 20px;
            font-weight: 600;
        }
    }

    .common_data {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .common_data_right {
            width: 25%;

            .common_data_single {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #333;
                font-weight: bold;
                font-size: 14px;
                margin-bottom: 15px;
            }

            .common_data_single:last-of-type {
                margin-bottom: 0px;
            }
        }
    }
}

::v-deep.el-card {
    border-radius: 8px;
}

.page_content {
    background: #fff;
    padding-bottom: 30px;
    box-sizing: border-box;
    padding: 20px 20px 30px 20px;
    border-radius: 8px;

    .page_content_head {
        display: flex;
    }
}

::v-deep.sys_table {
    .tableHeaderRow {
        cursor: pointer;

        .tableHeaderCell:active {
            opacity: 0.6;
        }

        .tableHeaderCell:last-of-type:active {
            opacity: 1;
        }

        .tableHeaderCell:first-of-type:active {
            opacity: 1;
        }

        .tableHeaderCell:last-of-type {
            cursor: default;
        }

        .tableHeaderCell:first-of-type {
            cursor: default;
        }
    }
}

.ope_btn {
    width: 44px;
    height: 28px;
    line-height: 28px;
    color: #3399ff;
    font-size: 14px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 85, 255, 0.5);
    padding: 0px;
}

.del_btn {
    width: 44px;
    height: 28px;
    background: #ffffff;
    line-height: 28px;
    color: #ff4c4d;
    font-size: 14px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid rgba(255, 76, 77, 0.5);
    padding: 0px;
}

.change_date {
    position: static;
    // right: 3px;
    // top: 0px;
    // border-color: var(--color) !important;
    border: none;
    overflow: visible;

    .el-button {
        width: 40px;
        height: 28px;
        line-height: 28px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        margin-right: 8px;
        border-radius: 4px;
    }

    .el-button:last-of-type {
        margin-right: 0px;
    }

    .date_active {
        border-color: var(--color) !important;
        color: var(--color) !important;
        background: #fff;
    }
}
</style>
